<template>
	<div class="main">
		<div class="main-header" style="justify-content: space-between;">
			<!-- <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            > -->
			<div style="display: flex;">
				<el-input placeholder="请输入内容" style="width: 200px;margin-right: 10px;" v-model="searchParamCp.keyword"
					size="mini" clearable>
				</el-input>
				<el-select v-model="searchParamCp.type" size="mini" placeholder="请选择售后类型"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="item in paylist" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="searchParamCp.status" size="mini" placeholder="请选择售后状态"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="item in typelist" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
				<div class="timepick">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>
			<div>
				<!-- <el-button type="primary" size="mini" @click="exportExcel">导出</el-button> -->
			</div>
		</div>
		<el-table ref="table" class="main-table" :data="memberData" height="86%" border
			header-cell-class-name="main-table-header" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="39"></el-table-column>
			<el-table-column label="商家角色" width="70">
				<template slot-scope="{row}">
					{{ $store.getters.rule_type[row.rule_type] }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="商家名称" prop="merch_name" width="100px" />
			<el-table-column align="center" label="会员昵称" prop="wxName"  />
			<el-table-column align="center" label="订单号" prop="order_sn"   width="180px"/>
			<el-table-column width="120px" align="center" label="电话号码" prop="mobile" />
			<el-table-column align="center" width="100px" label="订单总金额" prop="total_money" />
			<!-- <el-table-column align="center" width="100px" label="运费" prop="freight_money" /> -->
			<el-table-column align="center" label="支付金额" prop="pay_money" />
			<el-table-column align="center" label="下单时间" prop="addtime"  width="180px">
				<template slot-scope="{row}">
					{{row.addtime|formatDate}}
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付时间" prop="pay_time"  width="180px">
				<template slot-scope="{row}">
					{{row.pay_time|formatDate}}
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单状态" prop="status" width="120px">
				<template slot-scope="{row}">
					<!-- // 0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成 -->
					<el-tag v-if="row.status==2">待收货</el-tag>
					<el-tag v-if="row.status==7" type="success">售后完成</el-tag>
					<el-tag v-if="row.status==6" type="success">已完成</el-tag>
					<el-tag v-if="row.status==4" type="info">已取消</el-tag>
					<el-tag v-if="row.status==1" type="warning">待发货</el-tag>
					<el-tag v-if="row.status==3" type="warning">待评价</el-tag>
					<el-tag v-if="row.status==5" type="danger">售后退款中</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="售后类型" prop="ref_type" width="120px">
				<template slot-scope="{row}">
					<!-- // ref_type 1退款退货 2退款不退货 3我要换货 -->
					<el-tag v-if="row.ref_type==1">退款退货</el-tag>
					<el-tag v-if="row.ref_type==2" type="danger">退款不退货</el-tag>
					<el-tag v-if="row.ref_type==3" type="warning">我要换货</el-tag>
				</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="拉卡拉退款状态" prop="status" width="120px">
				<template slot-scope="{row}">
					<el-tag v-if="row.lkl_refund_status==1001">进行中</el-tag>
					<el-tag v-if="row.lkl_refund_status==1004" type="success">已退款</el-tag>
					<el-tag v-if="row.lkl_refund_status==2002" type="warning">已关闭</el-tag>
				</template>
			</el-table-column> -->
			<el-table-column align="center" label="支付状态" prop="pay_status"  width="120px">
				<template slot-scope="{row}">
					<!-- // 0未支付 1已支付 -->
					<el-tag v-if="row.pay_status==1" type="success">已支付</el-tag>
					<el-tag v-if="row.pay_status==0" type="warning">未支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单类型" prop="delivery_method" width="120px">
				<template slot-scope="{row}">
					<!-- //delivery_method =1配送订单delivery_method =2自提订单-->
					<!-- order_type 1 商城购买  2积分兑换 -->
					<el-tag v-if="row.order_type == 1">商品订单</el-tag>
					<el-tag v-if="row.order_type == 2" type="success">到店支付订单</el-tag>
					<el-tag v-if="row.order_type == 3" type="danger">外卖订单</el-tag>
					<el-tag v-if="row.order_type == 4" type="warning">自提订单</el-tag>
					<el-tag v-if="row.order_type == 5" type="info">团购订单</el-tag>
					<!-- <el-tag v-if="row.order_type==1">商城购买</el-tag>
					<el-tag v-if="row.order_type==2" type="success">积分兑换</el-tag> -->
				</template>
			</el-table-column>
			<!-- pay_type 1积分支付 2微信支付  3POS余额支付 4账户余额支付 -->
			<el-table-column align="center" label="支付方式" prop="pay_type" width="120px">
				<template slot-scope="{row}">
					<el-tag v-if="row.pay_type == 1">积分支付</el-tag>
					<el-tag v-if="row.pay_type == 2" type="success">微信支付</el-tag>
					<el-tag v-if="row.pay_type == 3" type="danger">优生活支付</el-tag>
					<el-tag v-if="row.pay_type == 4" type="warning">账户余额支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付状态" prop="pay_status"  width="120px">
				<template slot-scope="{row}">
					<!-- // 0未支付 1已支付 -->
					<el-tag v-if="row.pay_status==1" type="success">已支付</el-tag>
					<el-tag v-if="row.pay_status==0" type="warning">未支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="180px">
				<template slot-scope="{row}">
					<el-button type="primary" @click="onCheck(row)">详情</el-button>
					<!-- //0申请售后中 1 平台同意售后 2平台拒绝售后 3售后完成 -->
					<!-- // 0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成  -->
					<!--ref_status 0申请售后中 1 平台同意售后 2平台拒绝售后 3售后完成 -->
					<el-button type="primary" v-if="row.pay_status==1&&row.status==5" :disabled="row.ref_status!==0" @click="sentgoods(row)">审核</el-button>
					<!-- <el-button type="primary" disabled v-if="row.pay_status==1&&row.status==2" @click="sentgoods(row)">已发货</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<div class="amountto" v-if="statistics">
			<div class="titlebox">合计：总金额：<span>{{ formatNumberWithComma((statistics.total_money).toFixed(2)) }}</span>元</div>
			<div class="titlebox">当前金额：<span>{{ formatNumberWithComma((statistics.pay_money).toFixed(2)) }}</span>元</div>
			<!-- <div class="titlebox">优惠金额：<span>{{ (statistics.discounts_money).toFixed(2) }}</span>元</div> -->
		</div>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
		<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="800px"
			@close="onDialogClose">
			<component :is="dialogView" @update="getMemberData" @search="search" :id="orderid" @send="send" @agree="agree" :reinfo="reinfo"></component>
		</el-dialog>
		<!-- <Info ref="info" :formData="orderinfo" @close="onDialogClose" /> -->
	</div>
</template>

<script>
	import {
		get,post
	} from "@/assets/js/http.js";
import { Result } from "element-ui";
	export default {
		name: "view-aftersales",
		data() {
			return {
				memberData: [],
				selection: [],
				page: 1,
				statistics:{},
				limit: 20,
				total: 0,
				dialogVisible: false,
				dialogTitle: "",
				dialogView: "",
				searchinfo: {
					keyword: '',
					search_time: [],
					status: '',
					type: ''
				},
				searchParamCp: {},
				paylist: [{
					id: 1,
					label: '退款退货'
				}, {
					id: 2,
					label: '退款不退货'
				},
				{
					id: 3,
					label: '我要换货'
				}], //售后类型type 1退款退货 2退款不退货 3我要换货
				typelist: [{
					id: 0,
					label: '申请售后中'
				}, {
					id: 1,
					label: '平台同意售后'
				}, {
					id: 2,
					label: '平台拒绝售后'
				}, {
					id: 3,
					label: '售后完成'
				}], //售后状态 status 0申请售后中 1 平台同意售后 2平台拒绝售后 3售后完成
				orderid: '', //订单详情
				reinfo:{},//售后信息
			};
		},
		computed: {
			buttons() {
				return this.$store.state.buttons;
			}
		},
		components: {
			Sent: () => import("./sent.vue"),
			Search: () => import("./search.vue"),
			// Info: () => import("./info.vue")
		},
		mounted() {
			this.getMemberData();
		},
		updated() {
		
			this.$nextTick(() => {
		
				this.$refs.table.doLayout();
		
			});
		
		},
		methods: {
			formatNumberWithComma(number) {
			  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			},
			search(result) {
				this.page = 1;
				console.log(result);
			},
			searchs() {
				this.page = 1
				this.searchinfo = {
					...this.searchinfo,
					...this.searchParamCp
				}
				this.getMemberData()
			},
			//拒绝
			send(result){
				console.log(result,'result')
				const data = {
					id:result.ref_id,
					reason:result.reason
				}
				post({
					url:'/admin/order.Order/rejectRefound',
					data,
					successTip: true,
				}).then(res=>{
					this.getMemberData()
				})
			},
			//同意
			agree(result){
				console.log(result,'result')
				const data = {
					id:result.ref_id,
				}
				post({
					url:'/admin/order.Order/checkRefound',
					data,
					successTip: true,
				}).then(res=>{
					this.getMemberData()
				})
			},
			reset() {
				this.searchParamCp = {}
				this.searchinfo = {
						keyword: '',
						search_time: [],
						status: '',
						type: ''
					},
					this.getMemberData()
			},
			async getMemberData() {
				const data = await get({
					url: "/admin/order.Order/refoundlist",
					loading: true,
					params: {
						page: this.page,
						limit: this.limit,
						...this.searchinfo,
						...{
							search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
								' - ') : ''
						}
					},
				});
				const list = data.list;
				this.total = data.total;
				this.statistics = data.statistics
				list.forEach(item => {
					item.firstCostDate = item.firstCostDate?.slice(0, 10);
					item.latestCostDate = item.latestCostDate?.slice(0, 10);
				});
				this.memberData = list;
			},
			//导出
			async exportExcel() {
				this.$loading()
				let res = await get({
					export: true,
					url: '/admin/order.Order/export',
					params: {
						...this.searchinfo,
						...{
							search_time: this.searchinfo.search_time && this.searchinfo.search_time
								.length ? this.searchinfo.search_time.join(' - ') : ''
						}
					}
				})
				let a = document.createElement('a');
				var url = URL.createObjectURL(res);
				a.href = url;
				a.click();
				this.$loading().close()
			},
			onCurrentChange(index) {
				this.page = index;
				this.getMemberData();
			},
			//详情
			onCheck(row) {
				// this.dialogTitle = "查看客户照片";
				// this.dialogView = "Photo";
				// this.dialogView = "Info";
				// this.dialogVisible = true;
				this.orderid = row.id
				this.dialogVisible = true;
				this.dialogView = "Search";
			},
			sentgoods(row){
				this.orderid = row.id
				this.reinfo = row
				this.dialogView = "Sent"
				this.dialogVisible = true;
			},
			onSearch() {
				this.dialogTitle = "搜索";
				this.dialogView = "Search";
				this.dialogVisible = true;
			},
			onSelectionChange(selection) {
				this.selection = selection;
			},
			onRowClick(row) {
				this.$refs.table.toggleRowSelection(row);
				this.$refs.info.show();
			},
			onDialogClose() {
				this.$refs.table.clearSelection();
			},
			tapButton(item) {
				if (item.path === "check") {
					this.onCheck();
				} else if (item.path === "search") {
					this.onSearch();
				}
			}
		}
	};
</script>
<style>
	.timepick {
		width: 360px;
		margin-right: 10px;
	}
	.amountto {
		height: 4%;
		display: flex;
		align-items: center;
		color: #606266;
		font-size: 12px;
	
		.titlebox {
			margin-right: 50px;
	
			>span {
				color: #606266;
			}
		}
	}
</style>
